﻿<html>
  <head>
    <title>中国海洋大学零星采购管理系统</title>
    <%= stylesheet_link_tag "/javascripts/ext/resources/css/ext-all.css" %>
    <%= stylesheet_link_tag "/stylesheets/images.css" %>
    <%= stylesheet_link_tag "/javascripts/ext/examples/ux/css/ColumnNodeUI.css" %>
    <%= stylesheet_link_tag "/stylesheets/fileuploadfield.css" %>
    <%= stylesheet_link_tag "ext-patch" %>

    <%= javascript_include_tag "ext/adapter/ext/ext-base.js" %>
    <%= javascript_include_tag "ext/ext-all.js" %>
    <%= javascript_include_tag "ext/src/locale/ext-lang-zh_CN.js" %>
    <%= javascript_include_tag "/javascripts/application.js" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


  </head>
  <body>
    <script type="text/javascript">

      Ext.onReady(function(){

        Ext.QuickTips.init();

        var loginName = new Ext.form.TextField({
          fieldLabel: '账号',
          name: 'login_id',
          allowBlank: false,
          blankText: "账号不能为空",
          anchor: '90%',
          listeners: {
            scope: this,
            keypress: function(field, e) {
              if (e.getKey() == 13) {
                loginPwd.focus(true);
              }
            }
          }
        })

        var loginPwd = new Ext.form.TextField({
          fieldLabel: '密码',
          inputType: 'password',
          name: 'password',
          allowBlank: false,
          blankText: "密码不能为空",
          anchor: '90%',
          listeners: {
            scope: this,
            keypress: function(field, e) {
              if (e.getKey() == 13) {
                this.submit();
              }
            }
          }
        })

        var userTypeStore = new Ext.data.ArrayStore({
          fields: ['text'],
          data : userTypeDataArray
        });

        var loginType = new Ext.form.ComboBox({
          fieldLabel: '用户类型',
          store: userTypeStore,
          valueField:'text',
          displayField:'text',
          typeAhead: true,
          mode: 'local',
          triggerAction: 'all',
          selectOnFocus:true,
          name:'user_type',
          emptyText:'请选择...',
          allowBlank: false,
          anchor: '90%'
        });


        var submit = new Ext.Button({
          text: '确定',
          scope: this,
          handler: function() {
            submit.setDisabled(true);
            if (form.form.isValid()) {
              form.form.submit({
                method: 'POST',
                scope: this,
                success: function(result, response) {
                  if (response.result.info == "success") {
                    //登录成功,转向主页面
                    window.location = '/'
                  }
                  else {
                    Ext.MessageBox.alert('消息', response.result.info);
                    submit.setDisabled(false);
                    loginName.focus(true);
                  }
                },
                failure: function(result, response) {
                  Ext.MessageBox.alert('提示', result.responseText);
                }
              });
            }
            else {
              submit.setDisabled(false);
              Ext.MessageBox.alert('输入验证有错', '请输入必输选项');
            }
          }
        })

        var reset = new Ext.Button ({
          text: '重置',
          scope: this,
          handler: function() {
            form.form.reset()
          }
        })


        var form = new Ext.form.FormPanel({
          url: '/index/validate_user',
          buttonAlign: 'center',
          labelAlign: 'right',  
          bodyStyle: 'padding:5px;',
          layout: 'column',
          frame: true,
          defaults: {
            enableKeyEvents: true,
            anchor: '90%',
            allowBlank: false
          },
          items: [
            {
              id: 'formImg',
              columnWidth: 1,
              bodyStyle: Ext.isIE ? 'padding:15px 0 5px 15px;' : 'padding:10px 15px;',
              border: false,
              xtype: 'panel',
              html: '<img src = "/images/xiaoyuan.jpg" width="540" height="363"/>'
            },
            {
              id: 'formTable',
              columnWidth: 1,
              xtype: 'panel',
              labelWidth: 60,
              buttonAlign: 'center',
              layout: 'column',
              bodyStyle: Ext.isIE ? 'padding:15px 0 5px 15px;' : 'padding:10px 15px;',
              border: false,
              items: [{
                  columnWidth:.3,
                  layout:'form',
                  items:[loginName]               
                },
                {
                  columnWidth:.3,
                  layout:'form',
                  items:[loginPwd]                
                },
                {
                  columnWidth:.4,
                  layout:'form',
                  items:[loginType]
                }
              ],
              buttons: [submit,reset]}
          ]
        });

        var dlg = new Ext.Window({
          width: 600,
          height: 520,
          title: '中国海洋大学零星采购管理系统',
          plain: true,
          closable: false,
          resizable: false,
          frame: true,
          layout: 'fit',
          closeAction: 'hide',
          border: false,
          modal: true,
          items: [form]
        });

        dlg.show();
      })
    </script>
  </body>
</html>